@import '../../style/themes/index';
@import './mixin.less';
@import '../../style/mixins/overlay';
@import './token.less';

@drawer-prefix-cls: ~'@{kd-prefix}-drawer';

.@{drawer-prefix-cls} {
  display: flex;
  z-index: @z-index-dialog;
  &-active {
    .@{drawer-prefix-cls}-mask {
      opacity: 1;
      visibility: visible;
      transition: all calc(@duration-promptly - 0.1s) @motion-ease-out;
    }
  }
  &-hide {
    visibility: hidden;
    transition: visibility calc(@duration-promptly - 0.1s) @motion-ease-out;
  }
  position: fixed;
  .overall-postion();
  &-mask {
    .overlay(rgba(55, 55, 55, 0.5), 0);
    opacity: 0;
    transition: opacity calc(@duration-promptly - 0.1s) @motion-ease-out;
  }
  &-not-at-body {
    position: absolute;
    .@{drawer-prefix-cls}-mask {
      position: absolute;
    }
  }
  &-container-left,
  &-container-right {
    .drawer-container-placement-horizontal();
  }
  &-container-top,
  &-container-bottom {
    .drawer-container-placement-vertical();
    .@{drawer-prefix-cls}-body {
      max-height: @drawer-body-max-height-vertical;
      overflow-y: auto;
    }
  }

  &-container-box {
    display: flex;
    position: absolute;
    flex-direction: column;
    background: @drawer-bg;
    box-shadow: -4px 0 10px 0 rgba(0, 0, 0, 0.1);
    transition: all calc(@duration-promptly - 0.1s) @motion-ease-out;
    .@{drawer-prefix-cls}-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: @drawer-header-padding-vertical @drawer-header-padding-horizontal;
      border-bottom: @drawer-dividing-width solid @drawer-dividing-color;
      .@{drawer-prefix-cls}-title {
        letter-spacing: 0;
        line-height: 26px;
        font-size: @drawer-title-font-size;
        color: @drawer-title-font-color;
      }
      .@{drawer-prefix-cls}-close-icon {
        i {
          color: @drawer-close-icon-color;
          font-size: @drawer-close-icon-font-size;
        }
        cursor: pointer;
      }
    }
    .@{drawer-prefix-cls}-body {
      display: flex;
      flex-grow: 1;
      flex-direction: column;
      padding: @drawer-body-padding;
      font-size: @font-size-middle;
      color: @color-text-primary;
    }
    .@{drawer-prefix-cls}-footer {
      display: flex;
      min-height: 40px;
      font-size: @font-size-small;
      color: @color-text-primary;
    }
  }
}
